<template>
  <div>
    <a v-if="showDrawer" class="ant-link drawer" @click="drawerFun">
      主题
      <DashboardOutlined />
    </a>
    <Drawer ref="drawer" />
    <a-dropdown>
      <a class="ant-dropdown-link" @click.prevent>
        {{ adminUserInfo["adminUserName"] }}
        <UserOutlined />
      </a>
      <template #overlay>
        <a-menu @click="handleMenuClick">
          <a-menu-item class="ant-header-dropdown-item" key="updatePwd"
            ><SolutionOutlined />账户设置</a-menu-item
          >
          <a-menu-item class="ant-header-dropdown-item" key="outLogin"
            ><LogoutOutlined />安全退出</a-menu-item
          >
        </a-menu>
      </template>
    </a-dropdown>
    <!-- 账户设置 -->
    <a-modal
      v-model:visible="visible"
      :width="340"
      title="账户设置"
      ok-text="修改"
      cancel-text="取消"
      @ok="handleOk"
    >
      <a-form ref="formRef" :model="formState">
        <a-form-item ref="name" label="登录账户" name="user_name">
          <a-input v-model:value="formState.user_name" />
        </a-form-item>
        <a-form-item has-feedback label="登录密码" name="password">
          <a-input
            v-model:value="formState.password"
            type="password"
            autocomplete="off"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import {
  UserOutlined,
  LogoutOutlined,
  SolutionOutlined,
  DashboardOutlined,
  QuestionCircleOutlined,
} from "@ant-design/icons-vue";
import { Modal } from "ant-design-vue";
import { app, clearLogin, cache, notice } from "@/config";
import { defineComponent, createVNode, reactive, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import Drawer from "@/layouts/public/Drawer.vue";
import { outLogin, update } from "@/api/user/Login";
import store from "@/store";
export default defineComponent({
  components: {
    UserOutlined,
    LogoutOutlined,
    SolutionOutlined,
    Drawer,
    DashboardOutlined,
  },
  setup() {
    const state = reactive({
      drawer: null,
      showDrawer: app.layouts.showDrawer,
      visible: false,
      adminUserInfo: cache("adminUserInfo"),
    });

    const formState = reactive({
      user_name: state.adminUserInfo["adminUserName"],
      password: "",
    });

    const router = useRouter();
    const route = useRoute();

    let handleMenuClick = (item) => {
      // 修改密码
      if (item.key == "updatePwd") {
        state.visible = state.visible ? false : true;
      }
      // 退出登录
      if (item.key == "outLogin") {
        Modal.confirm({
          title: "确定要注销登录吗?",
          okText: "确定",
          cancelText: "取消",
          icon: createVNode(QuestionCircleOutlined),
          onOk() {
            outLogin()
              .then(() => {
                // 跳转
                router.push({
                  path: "/user/login",
                  query: {
                    redirect: encodeURIComponent(route.path),
                  },
                });
                clearLogin();
              })
              .catch(() => {});
          },
          onCancel() {},
        });
      }
    };
    const drawerFun = () => {
      state.drawer.visibleChange();
    };
    const handleOk = () => {
      update(formState).then((res) => {
        state.adminUserInfo = res.data
        store.commit('saveAdminUserInfo', res.data)
        notice("success", res.message);
        state.visible = false;
      });
    };
    return {
      formState,
      handleMenuClick,
      ...toRefs(state),
      drawerFun,
      handleOk,
    };
  },
});
</script>
<style scoped>
.ant-link,
.ant-dropdown-link {
  color: #0e0e0ed9;
  font-size: 16px;
}
.drawer {
  margin-right: 22px;
}
.ant-header-dropdown-item {
  padding: 8px 30px !important;
}
</style>